<script setup>
import { ref,reactive,computed,watch,watchEffect,onMounted,nextTick,provide,inject} from "vue";
import {open,useHook,click} from "./fileHook"
import { uid } from "../../utils";


const id=uid()
const {state}=useHook(id)
const props=defineProps({
	title:{
		type:String,
		default:""
	},
	icon:{
		type:String,
		default:"file"
	},
	padding:{
		type:Number,
		default:0
	},
	data:{
		type:String,
		default:""
	}
})
const emits=defineEmits(["myClick"])
function mouseup(){
	open.value=id
	click.value=true
	emits("myClick",props.data)
}
</script>


<template>
<div class="title" :style="{paddingLeft:`calc( ${padding} * 1em )`}" :class="[state]" @mouseup="mouseup">
	<zi-icon :name="icon" style="padding:0 .5em;"/><slot />
</div>
</template>

<style scoped>

.file{
	color: #d8d8d8;
}
.title{
	cursor: pointer;
	box-sizing: border-box;
	padding: 0.1em 0;
	border: 1px solid transparent;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.title:hover{
	background-color: var(--bg-hover);
}
.title.action{
	background-color: var(--bg-action);
	border-color: var(--br-action);
}
.blur{
	background-color: var(--bg-blur);
	border-color: var(--br-blur);
}
</style>